<template>
    <div class="Preview">
        <!-- 调试阶段直接开启 visibility:'hidden' -->
        <!-- 正式阶段 visibility: showIframe ? "visible" : "hidden", -->
        <iframe
            className="preview-iframe"
            src="http://127.0.0.1:9008/preview"
            scrolling="yes"
            frameBorder="0"
            id="previewIframe"
            :style="{
                visibility: 'hidden'
            }"
        />
        <!-- iframe无法监听拖拽事件，需要一个克隆的盒子覆盖 -->
        
        <!-- 调试阶段直接开启 visibility:'visible',
        正式阶段 visibility: !showIframe ? "visible" : "hidden", -->
        <div
            class="clone-iframe"
            :style="{
                visibility: 'visible',
                top: `${ -(scrollY ?? 0) + 56 + 16 }px`,
            }"
        >
            <div class="clone-iframe-container">
                <Header />
                <div class="components-main">
                    <draggable
                        class="components-main-draggable"
                        :list="state.previewComList"
                        animation="300"
                        group="comDragGroup"
                        ghost-class="ghost"
                    >
                        <template #item="{ element, index }">
                            <ComItem
                                :IDkey="`comItem-${index}`"
                                :index="index"
                                :comItem="element"
                                :comList="state.previewComList"
                                :selectedComSchema="selectedComSchema"
                            />
                        </template>
                    </draggable>
                    <!-- <template v-if="isShowEmptyCom">
                        <EmptyCom />
                    </template> -->
                </div>
            </div>
        </div>
        <div class="Preview-page_manage_warp">
            <div class="Preview-page_manage_warp-header">
                页面布局
            </div>
            <div class="Preview-page_manage_warp-sorttable">
                <template v-for="(com, index) in state.previewComList" :key="index">
                <div class="Preview-page_manage_warp-sorttable-item">
                    <div class="container">
                        <div class="content">
                            <holder-outlined />
                            <span class="text">{{ index+1 }} {{ com.text }}</span>
                        </div>
                        <div class="icon">
                            <switcher-outlined />
                        </div>
                    </div>
                </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
  reactive,
  ref,
  toRefs,
  watch,
} from 'vue';
import {
    HolderOutlined,
    SwitcherOutlined
} from '@ant-design/icons-vue';

import draggable from 'vuedraggable';

import useCom from '@/store/com';
import {
  ComItem,
  Header,
} from '@activity/common-components';

import EmptyCom from './EmptyCom.vue';

const comStore = useCom();
const { isShowEmptyCom, isDragEnd, curDragComSchema, selectedComSchema } = toRefs(comStore);

const showIframe = ref(false);
const scrollY = ref(0);
const state = reactive({
    comDragGroup: {
        name: 'comDragGroup',
        pull: false,
        put: false,
    },
    previewComList: [],
});

watch(() => curDragComSchema, (newSchema) => {
    if(newSchema.value) {
        state.previewComList.push(newSchema.value);
        comStore.reset();
    }
    console.log('state.previewComList-----------', state.previewComList);
},{
    deep: true,
});
watch(() => selectedComSchema.value, (newSchema) => {
    console.log('selectedComSchema-----------', newSchema);
},{
    deep: true,
});

</script>

<style lang="less" scoped>
.Preview{
    position: absolute;
    // top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 601px;
    z-index: -1;
    overflow: hidden;
    height: calc(100% - 56px);
    background-color: #f7f8fa;
    &::-webkit-scrollbar {
        display:none;
    }
    .preview-iframe{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: none;
        height: 100%;
        width: 100%;
    }
    .clone-iframe{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 72px;
        &-container{
            width: 375px;
            max-width: 540px;
            margin: 0 auto;
            min-height: 603px;
            box-shadow: 0 4px 16px 0 rgb(0 0 0 / 10%);
            .components-main{
                min-height: 400px;
                &-draggable{
                    width: 100%;
                    min-height: 400px;
                }
            }
        }
    }
    &-page_manage_warp{
        position: fixed;
        top: 56px;
        bottom: 0;
        right: 376px;
        width: 168px;
        z-index: 9;
        border-right: 1px solid #e0e0e0;
        box-shadow: -5px 0 10px -5px rgba(0,0,0,.1);
        background-color: #fff;
        height: calc(100% - 56px);
        &-header{
            box-sizing: border-box;
            height: 48px;
            background-color: #f7f7f7;
            padding: 12px 16px;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -ms-flex-align: center;
            align-items: center;
            font-size: 16px;
            line-height: 24px;
        }
        &-sorttable{
            position: relative;
            &-item{
                margin-top: 0;
                box-shadow: none;
                border-bottom: 1px solid #e0e0e0;
                border-radius: 0;
                .container{
                    box-sizing: border-box;
                    height: 47px;
                    line-height: 20px;
                    padding: 12px 16px;
                    font-size: 14px;
                    color: #323233;
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-align: center;
                    align-items: center;
                    -ms-flex-pack: justify;
                    justify-content: space-between;
                    cursor: pointer;
                    .content{
                        
                    }
                }
            }
        }
    }
}
</style>